<template>
  <div class="teaCourseContainer">
    <BasicTable @handler="tableHandler" :column="topColumn" :data="topData" :height="300"></BasicTable>
    <div style="margin-top: 50px;">
      <BasicTable :column="botColumn" :data="botData" :height="300"></BasicTable>
    </div>
  </div>
</template>

<script>
import BasicTable from '@/components/BasicTable/BasicTable.vue'
import { getTeaCourse, getCourseStu  } from '@/api/user'
import { topTableColumn, botTableColumn } from '@/constants/teaCourse'

export default {
  name: "index",
  components: {
    BasicTable
  },
  data() {
    return {
      topData: [],
      topColumn: topTableColumn,
      botData: [],
      botColumn: botTableColumn
    }
  },
  methods: {
    tableHandler(val) {
      let { type, data } = val
      switch (type) {
        case 'rowClick':
          this.getStu(data)
          break
        default:
          break
      }
    },
    async getData() {
      const res = await getTeaCourse()
      if (res.success == true) {
        this.topData = res.data
      } else {
        this.$message.error(res.errorMsg)
      }
    },
    async getStu(val) {
      const res = await getCourseStu(val.courseId)
      if (res.success == true) {
        res.data.forEach(item => {
          if (item.gender == 0) {
            item.sex = '女'
          } else if (item.gender == 1) {
            item.sex = '男'
          }
        })
        this.botData = res.data
      } else {
        this.$message.error(res.errorMsg)
      }
    }
  },
  created() {
    this.getData()
  }
}
</script>

<style scoped lang="sass">
.teaCourseContainer
  padding: 20px
</style>
